<template>
	<view>
		<view v-if="isNull" class="none">
			<i class="iconfont iconwujilu"></i>
			<text>暂无数据</text>
		</view>
		<!-- 显示区域 -->
		<view class="img_item">
			<!-- <image v-for="(item, index) in column1" :key="index" :src="item.img_url" :style="{ width: '100%', height: `${item.height}px` }"></image> -->
			<view class="wf-item-page" v-for="(item, index) in column1" :key="index" @tap="itemTap(item)">
				<image :src="item.img_url" mode="widthFix" class="item-img" :style="{height: `${item.height}px` }" />
				<view class="title">
					{{item.title}}
				</view>
				<view class="bottom">
					<view class="item-info" @tap.stop="person(item.user_id)">
						<headimg :realSrc="item.avatar"></headimg>
						<view class="info-nickname">{{item.nicheng}}</view>
					</view>
					<view class="like-num" :class="[item.is_like == 2 ? 'zan_active' : '']"
						@tap.stop="giveUp(item.video_id,item.is_like,index,'left')">
						<view>
							<i v-if="item.is_like==2" class="iconfont iconxihuan"></i>
							<i v-else class="iconfont iconxinaixin"></i>
						</view>
						<text v-if="item.likenum < 10000">{{item.likenum}}</text>
						<text v-else>{{item.likenum / 10000}}w</text>
					</view>
				</view>
			</view>
		</view>
		<view class="img_item">
			<!-- <image v-for="(item, index) in column2" :key="index" :src="item.img_url" :style="{ width: '100%', height: `${item.height}px` }"></image> -->
			<view class="wf-item-page" v-for="(item, index) in column2" :key="index" :src="item.img_url"
				@tap="itemTap(item)">
				<image :src="item.img_url" mode="widthFix" class="item-img" :style="{height: `${item.height}px` }" />
				<view class="title">
					{{item.title}}
				</view>
				<view class="bottom">
					<view class="item-info" @tap.stop="person(item.user_id)">
						<headimg :realSrc="item.avatar"></headimg>
						<view class="info-nickname">{{item.nicheng}}</view>
					</view>
					<view class="like-num" :class="[item.is_like == 2 ? 'zan_active' : '']"
						@tap.stop="giveUp(item.video_id,item.is_like,index,'right')">
						<view>
							<i v-if="item.is_like==2" class="iconfont iconxihuan"></i>
							<i v-else class="iconfont iconxinaixin"></i>
						</view>
						<text v-if="item.likenum < 10000">{{item.likenum}}</text>
						<text v-else>{{item.likenum / 10000}}w</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <uni-load-more v-if="list.length >= 5" :status="status" :content-text="contentText" /> -->
		<!-- 隐藏区域   因为需要获取每个图片的 宽高    所以需要利用隐藏区域    通过 bindload 事件  获取每一个图片的宽高   -->
		<view style="display:none">
			<image v-for="(item, index) in imgArr" :key="index" :data-idx="item" :src="item.img_url"
				@load="e => imageLoad(e, item)"></image>
		</view>
	</view>
</template>

<script>
	import headimg from '@/components/head_img.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			headimg
		},
		data() {
			return {
				imgWidth: 0, // 	图片的宽        （ 屏幕宽  *  0.48 ）
				loadingCount: 0, //	需要再次加载图片的数量
				imgArr: [], //  	需要再次加载的图片数组
				column1: [], //  	第1列图片数组
				column2: [], //  	第2列图片数组
				column1Height: 0, //记录第1列图片数组高度总和
				column2Height: 0, //记录第2列图片数组高度总和
				lists_type: 1, //1为推荐,2为关注
			};
		},
		props: {
			title: '',
			school_id: {
				type: Number,
				default: 0
			},
			list: {
				type: Array,
				default () {
					return [];
				}
			},
			pagesize: Number,
			status: String,
			contentText: Object,
			isNull: { //是否为空列表
				type: [Boolean, String],
				default: false
			},
			topIndex: { //抖校页面选项卡索引
				type: [Number, String],
				default: 2
			}
		},
		watch: {
			// 监听
			list: {
				handler(val) {
					// console.log('监听', val);
					// this.column1= [], //  	第1列图片数组
					// this.column2= [], //  	第2列图片数组
					// this.column1Height= 0, //记录第1列图片数组高度总和
					// this.column2Height= 0 //记录第2列图片数组高度总和
					this.imgArr = val
					this.loadingCount = val.length
				},
				// 代表在wacth里声明了list这个方法之后立即先去执行handler方法
				immediate: true
				//设置deep: true 则可以监听到 list.name的变化 不设置是监听不到内部变化
				// deep: true,
			},
			topIndex(newVal) {
				console.log(newVal);
				if(newVal == 1) {
					this.lists_type = 2;
				} else if(newVal == 2) {
					this.lists_type = 1;
				} else {
					this.lists_type = null;
				}
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: res => {
					console.log('获取手机宽高', res);
					this.imgWidth = res.windowWidth * 0.48; // 定义所有图片的宽 ( 屏幕宽  *  0.48 ）
				}
			});
		},
		methods: {
			itemTap(item) {
				let url = ''
				if (this.school_id > 0) {
					url = '../../pages/topic/videoDetail?index= ' + item['key'] + '&pagesize=1&type=1&users_type=1' + '&lists_type='+this.lists_type +
						'&school_id=' + this.school_id + '&title=' + this.title
				} else {
					console.log("====");
					url = '../../pages/topic/videoDetail?index=' + item['key'] + '&pagesize=' + this.pagesize +'&type=1&users_type=1 '+
					'&lists_type='+this.lists_type +'&title=' + this.title
				}
				uni.navigateTo({
					url: url
				})
			},
			cleardata: function() {
				console.log("===============");
				this.column1 = []; //  	第1列图片数组
				this.column2 = []; //  	第2列图片数组
				this.column1Height = 0; //记录第1列图片数组高度总和
				this.column2Height = 0 //记录第2列图片数组高度总和
			},
			person(user_id) {
				var myId = uni.getStorageSync('userInfo').id;
				if (myId == user_id) {
					uni.navigateTo({
						url: '/pages/school/my-center'
					})
				} else {
					uni.navigateTo({
						url: '/pages/school/my-center?user_id=' + user_id
					})
				}
			},
			giveUp(video_id, is_like, index,type) {
				var state = 0;
				if (is_like == 2) {
					state = 1;
				} else {
					state = 2;
				}
				var data = {
					video_id: video_id,
					is_like: state
				}
				this.$api.apiPost('user/video.Lists/isLike', data).then(res => {
					if (res.data.code == 200) {
						if (is_like == 2) {
							if (type == 'left') {
								this.column1[index]['is_like'] = 0;
								this.column1[index].likenum--;
							} else {
								this.column2[index]['is_like'] = 0;
								this.column2[index].likenum--;
							}
						} else {
							if (type == 'left') {
								this.column1[index]['is_like'] = 2;
								this.column1[index].likenum++;
							} else {
								this.column2[index]['is_like'] = 2;
								this.column2[index].likenum++;
							}
						}
						this.$forceUpdate();
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 当图片载入完毕时触发   每加载一个隐藏区的图片都会触发一次
			 *
			 * 因为需要获取每个图片的 宽高    所以需要利用隐藏区域    通过 imageLoad(e) 事件中的 e 获取每一个图片的宽高
			 */
			imageLoad(e, item) {
				if (!e.detail.height) {
					return false;
				}
				let oImgW = e.detail.width; //图片原始宽度
				let oImgH = e.detail.height; //图片原始高度

				let scale = this.imgWidth / oImgW; //比例计算  （ 当前图片缩放的比例   =  定义的图片宽度 / 图片原始宽度       ）
				let imgHeight = oImgH * scale; //自适应高度（ 当前图片的自适应高度  =   图片原始高度 * 当前图片缩放的比例  ）
				item.height = imgHeight; //图片的自适应高度赋予 图片对象

				if (this.column1Height <= this.column2Height) {
					//判断 列表1 的高度 如果 小于等于 列表2 就将当前的图片对象添加到列表1数组中
					this.column1Height += imgHeight; //每次将当前图片高度加上之前的 高度
					this.column1.push(item); //更新第1列图片数组
				} else {
					this.column2Height += imgHeight;
					this.column2.push(item); //更新第2列图片数组
				}
				this.loadingCount = this.loadingCount - 1; //当前需要再次加载图片的数量减1
				if (this.loadingCount == 0) {
					this.imgArr = []; //如果当前需要再次加载图片的数量为0 就将 需要加载的图片数组清空
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.none {
		color: #999999;
		text-align: center;
	}
	.none .iconwujilu {
		color: #E5E5E5;
		font-size: 306upx;
		line-height: 1;
		display: block;
	}
	
	.none text {
		color: #E5E5E5;
		font-size: 46upx;
		display: block;
	}
	page {
		background: #FAFAFA;
	}

	.img_item {
		width: calc(50% - 30upx);
		margin: 15upx;
		display: inline-block;
		vertical-align: top;
	}

	.wf-item-page {
		background: #fff;
		overflow: hidden;
		border-radius: 10upx !important;
		margin-bottom: 15upx;
	}

	.item-img {
		width: 100%;
		border-radius: 10upx 10upx 0upx 0upx;
	}

	.title {
		margin-left: 10upx;
		font-size: 30upx;
		font-weight: 400;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;


	}

	.bottom {
		display: flex;
		justify-content: space-between;
	}

	.item-info {
		display: flex;
		align-items: center;
		padding: 10upx;
	}

	.like-num {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-right: 10upx;
		color: #666666;

		view {
			font-size: 22upx;
		}

		.iconxihuan {
			font-size: 34upx;
			color: #F10000;
			margin-right: 8upx;
		}

		.iconxinaixin {
			font-size: 26upx;
			color: #666666;
			margin-right: 8upx;
		}
	}

	.head_image {
		width: 40upx;
		height: 40upx;
		margin-right: 10upx;
	}

	.info-nickname {
		font-size: 20upx;
		color: #666;
	}
</style>
